<style lang="less" scoped>
  .menuSum {
    width: 130px;
    height: 30px;
    text-align: left;
  }
  .menuLeft {
    position: relative;
    cursor: pointer;
  }
  .menuArrowLeft {
    display: none;
    position: absolute;
    left: 150px;
  }

  .menuSum:hover .menuArrowLeft {
    display: inline;
  }
  .menu ul li {
    height: 30px;
    color: #657180;
  }
  .menu ul li:hover {
    color: goldenrod;
    cursor: pointer;
  }
  .menu ul:first-child {
    margin-top: 5px
  }

</style>
<template>
  <div>
    <Menu ref="sideMenu" width="auto" :active-name="activeName" :open-names="openNames" @on-select="onSelectMenu" @on-open-change="onOpenChange" theme="dark" >
      <Submenu v-for="item in menuList" :name="item.name" :key="item.name">
        <template slot="title">
          <Icon :type="item.icon"></Icon>
          {{item.title}}
        </template>
        <template v-for="itemSub in item.children" >
          <MenuItem  v-if="itemSub.children === undefined || itemSub.children.length < 1"  :name="itemSub.name" >{{itemSub.title}}</MenuItem>
          <Submenu v-if="itemSub.children !== undefined && itemSub.children.length >= 1" :name="itemSub.name">
            <template slot="title">{{itemSub.title}}</template>
            <MenuItem   v-for="itemSubChild in itemSub.children"  :key="itemSubChild.name" :name="itemSubChild.name">{{itemSubChild.title}}</MenuItem>
          </Submenu>
        </template>
      </Submenu>
    </Menu>
  </div>


</template>
<script>
  export default {
    components: {

    },
    props: {
      menuList: {
        type: Array,
        default: []
      },
      menuWidth: 'auto'
    },
    data () {
      return {
        // openNames: this.$store.state.app.openNames,
        openNames: [],
      }
    },
    computed: {
      activeName () {
        return this.$store.state.app.activeName;
      },
      // openNames () {
      //   return this.$store.state.app.openNames;
      // }
    },
    methods: {
      onSelectMenu (name) {
        this.$store.commit('setActiveName', name);
        let routerData =  this.$store.state.app.menuRouter;
        routerData[0].children.forEach(res => {
          if (name === res.name) {
            this.$store.commit('setTag', {name: res.title, path: res.name});
            this.$store.commit('setMenuPath', res.name);
            this.$store.commit('setKeepMenuList', res.name);
            this.$router.push({
              name: res.name
            });
          }
        });

      },
      setOpenName () {
       let result =  this.$store.state.app.openNames;
       console.log(result);
       // this.openNames.push(...result)
      },
      onOpenChange (name) {
        this.openNames = name;
        this.$store.commit('setOpenNames', name);
      }
    },
    updated () {
      this.$nextTick(() => {
        if (this.$refs.sideMenu) {
          this.$refs.sideMenu.updateOpened();
        }
      });
    }

  }
</script>
